<template>
  <div class="pagination-demo">
    <h3 class="title">普通分页</h3>
    <div>
      <p><d-button @click="updateCur">返回第一条</d-button><d-button @click="update">更新分页数据</d-button></p>
      <p><d-pagination :cur="cur" :total="total" :size="size" @change="change1"></d-pagination></p>
      <h5 class="sub-title">使用v-model</h5>
      <p>pagination: {{ pagination }}</p>
      <p><d-pagination v-model="pagination" @change="change2"></d-pagination></p>
    </div>
    <h3 class="title">普通分页</h3>
    <div>
      <d-pagination v-model="pagination2" @change="currentChange" small></d-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'paginationDemo',
  data () {
    return {
      cur: 1,
      total: 100,
      size: 10,
      pagination: {
        page: 1,
        size: 10,
        total: 100
      },
      pagination2: {
        page: 1,
        size: 10,
        total: 100
      }
    }
  },
  methods: {
    updateCur () {
      this.cur = 1
      this.pagination.page = 1
    },
    update () {
      this.size = this.pagination.size = this.size === 20 ? 10 : 20
      this.total = this.pagination.total = Math.floor(Math.random() * 300)
      this.updateCur()
    },
    change1 (value) {
      this.cur = value.cur
      this.size = value.size
      console.log(value)
    },
    change2 (value) {
      console.log(value)
    },
    currentChange (value) {
      console.log(value)
    }
  }
}
</script>

<style lang="stylus" scoped>
// .pagination-demo
</style>
